<template>
  <div>
    <div class="content" v-show="userStatus.mailState=='0'">
      <h3 class="user-title">{{'SAFE_AND_EFFECTIVE'|t}}</h3>
      <div class="form">
        <zx-form-group :title="$t('EMAIL_LBAEL')">
          <zx-input v-model="emailForm.email" type="text" :place="$t('EMAIL_PLACE')" ref="email" :rules="rules.email">
            <span class="input-text" slot="text" @click="getCode(emailForm.email,'email',$t('GET_CODE'),$event,'clickBool')">{{'GET_CODE'|t}}</span>
          </zx-input>
        </zx-form-group>
        <zx-form-group :title="$t('CODE_LABEL')">
          <zx-input v-model="emailForm.code" :place="$t('CODE_PLACE')" ref="code" :rules="rules.code">
          </zx-input>
        </zx-form-group>
        <zx-form-group>
          <input type="submit" class="submit-btn mt-20 green-btn radius" :value="$t('IMMEDIATELY_BINGDING')" @click="submit('emailForm','email')">
        </zx-form-group>
      </div>
    </div>
    <zx-user-auth :title="$t('SAFE_AND_EFFECTIVE')" routerPath='/user/email/change' v-show="userStatus.mailState=='1'"></zx-user-auth>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import { Form, Func, Auth, Rules } from '@/providers';
  import { User, UserInfo } from '@/services';
  import UserAuthText from '@/components/user-auth-text';
  export default {
    data() {
      return {
        name: '',
        clickBool: false,
        emailForm: {
          email: '',
          code: ''
        },
        rules: Rules
      };
    },
    methods: {
      // 获取验证码
      getCode(val, type, innerText, event, clickBool) {
        if (this[clickBool]) { return false; };
        if (!Form.validItem(this, type)) { return; };
        this[clickBool] = true;
        this.SentMail(val, event.target, clickBool, innerText);
      },
      // 发送邮箱
      async SentMail(val, target, clickBool, innerText) {
        try {
          let res = await UserInfo.SentMail({
            mail: val
          });
          this.$dialog.toast({
            msg: res.desc,
            position: 'top'
          });
          Func.countdown(target, this, clickBool, innerText);
        } catch (error) {
          console.log(error);
        }
      },
      // 表单提交
      async submit(formName, type) {
        if (!Form.validataForm(this, formName)) {
          return false;
        }
        let _parmas = this[formName];
        try {
          let res = await User.BindMail({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            mail: _parmas.email,
            code: _parmas.code
          });
          if (!Form.checkResToken(res)) {
            return;
          }
          this.$dialog.toast({
            position: 'top',
            msg: res.desc,
            onOk: () => {
              this.userStatus.mailState = '1';
            }
          });
        } catch (error) {
          console.log(error);
        }
      }
    },
    computed: {
      ...mapGetters([
        'userStatus'
      ])
    },
    components: {
      'zx-user-auth': UserAuthText
    }
  };
</script>
<style scoped lang="scss">
  @import "../../assets/sass/user.scss";
</style>